<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.woff">

</head>

<body>
    <div class="all-wrap" id="cart_comfirm">
        <header-top></header-top>
        <div class="container">
            <!-- 提示信息 -->
            <div class="shipping-tip mb-20">
                提示：订单中存在不支持7天无理由退货商品，请确认相关商品信息后提交订单。
            </div>
            <!-- 收货地址 -->
            <div class="shipping-address">
                <h1 class="shipping-address-title">填写并核对订单信息<span v-if="address.length>6" @click="clickTagAddress">{{tagAddress==1?"收起":"展示全部"}}</span></h1>
                <!--<div class="shipping-item-list clear">-->
                    <!--<div v-for="item in addressList" class="shipping-item clear" :class="{'cur':item.addressId == addressIdActive}" @click="shippingCheck(item.addressId)">-->
                        <!--<div class="hd">-->
                            <!--<p class="fl">{{item.title}}</p>-->
                            <!--<span class="fr" v-if="item.default == 1">默认地址</span>-->
                        <!--</div>-->
                        <!--<div class="bd">-->
                            <!--<p>{{item.address}}</p>-->
                            <!--<a class="change" onclick="alert('修改')" href="javascript:void(0);">修改</a>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="shipping-item shipping-btn" @click="openAddressDialog"></div>-->
                <!--</div>-->
            <!--</div>-->
                <div class="shipping-item-list clear">
                    <!--展开的状态-->
                    <div v-if="tagAddress==1"  v-for="(item,index) in address" class="shipping-item clear" :class="{'cur':index == addressIdActive}" @click="shippingCheck(index)" >
                        <div class="hd">
                            <p class="fl">{{item.userName}} ({{item.provinceName}} {{item.cityName}})</p>
                            <span class="fr" v-if="item.defalutFlag == 1">默认地址</span>
                        </div>
                        <div class="bd">
                            <p>{{item.provinceName}} {{item.cityName}}  {{item.districtName}} {{item.userAdress}}</p>
                            <p>{{item.userPhone}}</p>
                            <a class="change" onclick="alert('修改')" href="javascript:void(0);">修改</a>
                        </div>
                    </div>
                    <!--收起的状态-->
                    <div v-if="tagAddress==0" v-for="(item,index) in address.slice(0,6)" class="shipping-item clear" :class="{'cur':index == addressIdActive}" @click="shippingCheck(index)" >
                        <div class="hd">
                            <p class="fl">{{item.userName}} ({{item.provinceName}} {{item.cityName}})</p>
                            <span class="fr" v-if="item.defalutFlag == 1">默认地址</span>
                        </div>
                        <div class="bd">
                            <p>{{item.provinceName}} {{item.cityName}}  {{item.districtName}} {{item.userAdress}}</p>
                            <p>{{item.userPhone}}</p>
                            <a class="change" onclick="alert('修改')" href="javascript:void(0);">修改</a>
                        </div>
                    </div>
                    <div class="shipping-item shipping-btn" @click="openDialog(0)"></div>
                </div>
            </div>
            <!--商品信息-->
            <div v-for="(shop,index) in productList">
                <!-- 商品及服务信息 -->
                <div class="goods-server">
                    <h1 class="title">
                        确认订单信息
                    </h1>
                    <ul class="hd">
                        <li class="col1">
                            <span class="c1">商品</span>
                        </li>
                        <li class="col2">
                            <span class="c1">商品属性</span>
                        </li>
                        <li class="col3">商品价格</li>
                        <li class="col4">数量</li>
                        <li class="col5">优惠券</li>
                        <li class="col6">小计</li>
                    </ul>
                    <div class="main-form">
                        <div class="contactqq">
                            <strong class="source">{{shop[0].shopName}}</strong>
                            <i class="icon-login_qq"></i>
                        </div>
                        <ul class="form-items clear" v-for="product in shop">
                            <li class="clear">
                                <div class="source col1">
                                    <div class="img">
                                        <img :src="product.picImg" alt="">
                                    </div>
                                    <div class="content">
                                        <p class="goods-brief">{{product.name}}</p>
                                        <!-- <p class="hint"><span class="tag">退</span>不支持7天无理由退货</p> -->
                                    </div>
                                </div>
                                <div class="col2">
                                    <div class="size">
                                        <p>颜色分类：{{product.colorName}}</p>
                                        <p>尺码：{{product.sizeName}}</p>
                                    </div>
                                </div>
                                <div class="col3 price">
                                    ￥{{product.productPrice.toFixed(2)}}
                                </div>
                                <div class="col4">
                                    {{product.buyNumber}}
                                </div>
                                <div class="col5">

                                </div>
                                <div class="col6">
                                    <div class="total">
                                        <p class="old">￥{{product.productPrice.toFixed(2) * product.buyNumber.toFixed(2)}}</p>
                                        <p class="now">￥{{product.productAmount}}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="form-total">

                            <div class="carriage"><span class="carriage-price">￥{{shipmentPriceList["\""+shop[0].sellerId+"\""]}}</span><span class="carriage-name">运费</span></div>
                            <div class="total"><span class="total-price">￥{{ (money["\""+shop[0].sellerId+"\""] + shipmentPriceList["\""+shop[0].sellerId+"\""]).toFixed(2) }}</span><span class="total-name">合计</span></div>
                        </div>
                    </div>
                </div>

                <!-- 发票信息 -->
                <div class="invoice-info" v-if="invoiceForm.invoiceType > 1">
                    <div class="hd clear">
                        <h1 class="name">发票信息</h1>
                        <a class="btn" href="javascript:;" @click="invoiceExpand(1)">不开发票</a>
                        <span class="tips"> <em class="tips-icon"></em> 开具企业抬头发票须正确填写纳税人识别号，以免影响报销</span>
                    </div>
                    <div class="bd clear">
                        <el-form :model="invoiceForm" :rules="rules" ref="invoiceForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="发票类型" prop="invoiceType" required>
                                <el-radio-group v-model="invoiceForm.invoiceType">
                                    <el-radio :label="2">电子发票</el-radio>
                                    <el-radio :label="3">普通发票</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="发票抬头" prop="invoiceTitle" required>
                                <el-input v-model="invoiceForm.invoiceTitle"></el-input>
                            </el-form-item>
                            <el-form-item label="纳税人编号" prop="taxpayerNumber" required>
                                <el-input v-model="invoiceForm.taxpayerNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="收票人手机" prop="telephone" required>
                                <el-input v-model="invoiceForm.telephone"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email" required>
                                <el-input v-model="invoiceForm.email"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="invoice-info" v-else>
                    <div class="hd clear">
                        <h1 class="name" @click="invoiceExpand(2)">填写发票信息</h1>
                    </div>
                </div>
                <!-- 买家留言 -->
                <div class="guest-book">
                    <div class="hd clear">
                        <h1 class="name">买家留言</h1>
                    </div>
                    <div class="bd clear">
                        <textarea placeholder="买家留言" v-model="remarks" id="guestBook"></textarea>
                    </div>
                </div>
                <!-- 结算信息 -->
                <div class="billing-info">
                    <div class="hd">
                        <h1>结算信息</h1>
                    </div>
                    <div class="bd">
                        <div class="billing-ticket">
                            <!-- 当有可用券的时候 加上cur 反之不加 -->
                            <p @click="billingTicketExpand" class="ticket-status cur"><span class="icon-coupon" :class="[showBilling ? 'cut' : 'add']"></span><span class="titck-title">使用优惠券</span></p>
                            <ul class="tickets-list clear" v-show="showBilling">
                                <li @click="billingTicket(item,shop[0].sellerId)" v-for="item in couponList" :class="{'cur':item.id == (couponIdActive.get(shop[0].sellerId) ? couponIdActive.get(shop[0].sellerId).id : 0)  }">
                                    <div class="tickets-info clear">
                                        <div class="fl"><span>￥<em>{{item.faceValue}}</em></span></div>
                                        <div class="fr">
                                            <span>优惠券</span>
                                            <span>{{item.startTime}}-{{item.endTime}}</span>
                                        </div>
                                    </div>
                                    <div class="shangjia">
                                        {{item.couponName}}
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="billing-amount clear">
                            <div class="billing-r fr"><span class="strong" >¥{{ (money["\""+shop[0].sellerId+"\""] + shipmentPriceList["\""+shop[0].sellerId+"\""] - (!couponIdActive.get(shop[0].sellerId) ? 0 : couponIdActive.get(shop[0].sellerId)["faceValue"])).toFixed(2) }}</span></div>
                            <div class="billing-l fr"><span class="billing-amoun-total">{{money.countNumber}}</span>件商品&nbsp;&nbsp;总计：</div>
                        </div>
                        <div class="billing-carriage clear">
                            <div class="billing-r fr"><span>¥{{shipmentPriceList["\""+shop[0].sellerId+"\""]}}</span></div>
                            <div class="billing-l fr">运费：</div>
                        </div>
                        <!--<div class="billing-sale clear">-->
                        <!--<div class="billing-r fr"><span>-¥109.00</span></div>-->
                        <!--<div class="billing-l fr">优惠：</div>-->
                        <!--</div>-->
                        <div class="billing-ticket clear">
                            <div class="billing-r fr"><span>{{!couponIdActive.get(shop[0].sellerId) ? 0 : -couponIdActive.get(shop[0].sellerId)["faceValue"]}}</span></div>
                            <div class="billing-l fr">优惠券：</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 账单总信息 -->
            <div class="billing-total">
                <div class="billing-amount clear">
                    <div class="billing-r fr"><span class="strong" v-model = "money.allMoney">¥{{money.allMoney.toFixed(2)}}</span></div>
                    <div class="billing-l price-s fr">应付金额：</div>
                </div>
                <div class="billing-carriage clear">

                    <div class="billing-r fr" v-if="address.length"><span>{{address[addressIdActive].userName}} {{address[addressIdActive].userPhone}} {{address[addressIdActive].provinceName}} {{address[addressIdActive].cityName}} {{address[addressIdActive].districtName}} {{address[addressIdActive].userAdress}}</span></div>
                    <div class="billing-l fr">收货信息：</div>
                </div>
                <!--<div class="billing-carriage clear">-->
                    <!--<div class="billing-r fr"><span>支付宝</span></div>-->
                    <!--<div class="billing-l fr">支付方式：</div>-->
                <!--</div>-->
            </div>
            <!-- 提交订单按钮 -->
            <div class="billing-btn">
                <button @click="submit('invoiceForm')">提交订单</button>
            </div>
        </div>
        <!-- 弹出框 -->
        <div class="pop-wrap" v-if="showDialog">
            <div class="layer"></div>
            <!-- 收货地址 -->
            <div class="pop-center pop-shipping-address" v-if="dialogType==0">
                <div class="hd clear">
                    <h1 class="fl">新增收货信息</h1>
                    <span class="btn fr" @click="closeDialog">x</span>
                </div>
                <div class="bd">
                    <el-form :model="addressForm" :rules="rules" ref="addressForm" label-width="120px" class="demo-ruleForm">
                        <!-- <li class="clear">
                            <span class="name fl">配送方式：</span>
                            <div class="options fl clear">
                                <div class="radio fl">
                                    <input class="radio-beauty" type="radio" id="radio1" name="carriageType" />
                                    <label for="radio1">配送上门</label>
                                </div>
                                <div class="radio fl">
                                    <input class="radio-beauty" type="radio" id="radio2" name="carriageType" />
                                    <label for="radio2">自主提货</label>
                                </div>
                                <p class="radio-tips fl">选择自提点并下单>收到提货短信>到自提点自提</p>
                            </div>
                        </li> -->
                        <el-form-item label="收货人：" prop="name">
                            <el-input v-model="addressForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="手机：" prop="phone" required>
                            <el-input v-model="addressForm.phone"></el-input>
                        </el-form-item>

                        <el-form-item label="所在地区" required>
                            <el-col :span="8">
                                <el-form-item prop="provinceIndex">
                                    <el-select v-model="provinceIndex">
                                        <el-option label="请选择省" :value="-1"></el-option>
                                        <el-option  v-for="item,index in area" :label="item.areaname" :value="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item prop="cityIndex">
                                    <el-select v-model="cityIndex" >
                                        <el-option label="请选择市" :value="-1"></el-option>
                                        <el-option  v-for="item,index in cityList" :label="item.areaname" :value="index"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item prop="areaName">
                                    <el-select v-model="addressForm.areaName" >
                                        <el-option label="请选择区" :value="-1"></el-option>
                                        <el-option  v-for="item in areaList" :label="item.areaname" :value="item.areaname"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="详细地址：" prop="addInfo">
                            <el-input v-model="addressForm.addInfo"></el-input>
                        </el-form-item>

                        <el-form-item label="设为默认地址：" prop="default">
                            <el-switch
                                    v-model="addressForm.default">
                            </el-switch>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitAddress('addressForm')">保存并使用</el-button>
                        </el-form-item>
                    </el-form>
            </div>
        </div>
        <com-footer></com-footer>
    </div>

    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script src="../../lib/js/area.js"></script>
    <script>
        cart_comfirm();
    </script>
</body>

</html>